<!--
 * @Author: alenjzhang
 * @Date: 2024-03-20 22:39:48
 * @Description: 确认入住
-->
<script setup lang="ts">
import {
	CHECK_IN_METHOD_ENUM,
	INPUT_PLACEHOLDER,
	PAYMENT_METHOD_ENUM,
	SELECT_PLACEHOLDER,
	dateFormat
} from '@/const/index.ts';
import type { FormProps } from '@/types'
import { toRefs } from 'vue';

const props = defineProps<FormProps>()

const { readonly, validateInfos, formState } = toRefs(props);


</script>

<template>
	<!-- <div class="form-wrap"> -->
		<!-- <a-form layout="inline" class="base-form" :label-col="labelCol" :label-align="labelAlign"> -->
			<a-form-item label="入住时间" class="fourtyPercentWidth" v-bind="validateInfos.checkInDate">
				<a-date-picker :format="dateFormat" :valueFormat="dateFormat" v-if="!readonly" class="fullWidth"
					:placeholder="SELECT_PLACEHOLDER" v-model:value="formState.checkInDate">
				</a-date-picker>
				<span v-else>{{ formState.checkInDate }}</span>
			</a-form-item>
			<a-form-item label="房间床位" class="fourtyPercentWidth" v-bind="validateInfos.room">
				<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER" v-model:value="formState.room"></a-input>
				<span v-else>{{ formState.room }}</span>
			</a-form-item>
			<a-form-item label="入住方式" class="fourtyPercentWidth" v-bind="validateInfos.checkInMethod">
				<a-radio-group v-if="!readonly" :options="CHECK_IN_METHOD_ENUM.options"
					v-model:value="formState.checkInMethod"></a-radio-group>
				<span v-else>{{ formState.checkInMethod }}</span>
			</a-form-item>
			<a-form-item label="支付方式" class="fourtyPercentWidth">
				<a-select v-if="!readonly" :options="PAYMENT_METHOD_ENUM.options" :placeholder="SELECT_PLACEHOLDER"
					v-model:value="formState.payMethod"></a-select>
				<span v-else>{{ formState.payMethod }}</span>
			</a-form-item>
			<a-form-item label="报销比例" class="fourtyPercentWidth">
				<a-input v-if="!readonly" :placeholder="INPUT_PLACEHOLDER"
					v-model:value="formState.reimbursementRatio"></a-input>
				<span v-else>{{ formState.reimbursementRatio }}</span>
			</a-form-item>
		<!-- </a-form> -->
	<!-- </div> -->
</template>
